<template>
  <van-nav-bar :title="props.name"  @click-left = 'callback' class="head">
  <template #right>
    <van-icon name="wap-nav" size="18" color="white"  @click="showfn"/>
  </template>
  <template #left>
    <van-icon name="arrow-left" color="white"/>
  </template>
</van-nav-bar>
<van-popup
  v-model:show="show"
  closeable
  position="right"
  :style="{ height: '100%' }"
  :safe-area-inset-top	="true"
>
<ul>
  <li v-for="item in search" @click="toPage">
     {{item}}
  </li>
</ul>

</van-popup>

</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'
import {getSearchList} from '@/api/category'
const props= defineProps(["name"])
const $router = useRouter()
function callback(){
    $router.go(-1)
}
const show = ref(false)
function showfn(){
  show.value = true
}
const search:any = ref("")
getSearchList()
.then(res=>{
  search.value = res
})
function toPage(){
  $router.push('/home')
}
</script>

<style scoped>
.head{
    background: #1a9956;
    color: white;
    border: none;
}



</style>
<style >
.van-nav-bar__text,.van-nav-bar__title{
    color: white;
}
.van-popup--right{
  width: 187px;
  background: #1a9956;
}
ul{
  font-size:18px;
  color: white;
  margin-top: 60px;
}
li{
  line-height:45px;
  margin-left: 20px;
}
</style>